<template>
    <div class="content-sub">
        <div class="sub-box1">
          <div class="sub1-chart">
            <p class="chart-title"><span>分项用电负荷分布</span></p>
            <chart :options="chart1" :theme="chartTheme" auto-resize ></chart>
          </div>
        </div>
        <div class="sub-box2">
          <div class="sub1-chart">
            <p class="chart-title"><span>分项用电负荷分布</span></p>
            <chart :options="chart2" :theme="chartTheme" auto-resize> </chart>
          </div>
        </div>
        <div class="sub-box3">
          <div class="sub1-chart">
            <p class="chart-title"><span>照明用电</span></p>
            <div class="sub1-box-chart">
                <div class="sub1-proportion">
                  <p><i class="fa fa-lightbulb-o" aria-hidden="true"></i></p>
                  <p>累计占比</p>
                  <p v-text="lightProportion"></p>
                </div>
                <chart :options="chart3" :theme="chartTheme"> </chart>
            </div>
          </div>
        </div>
        <div class="sub-box3">
          <div class="sub1-chart">
            <p class="chart-title"><span>空调用电</span></p>
            <div class="sub1-box-chart">
                <div class="sub1-proportion">
                  <p><i class="fa fa-snowflake-o" aria-hidden="true"></i></p>
                  <p>累计占比</p>
                  <p v-text="acProportion">23%</p>
                </div>
                <chart :options="chart4" :theme="chartTheme"> </chart>
            </div>
          </div>
        </div>
        <div class="sub-box3">
          <div class="sub1-chart">
            <p class="chart-title"><span>动力用电</span></p>
            <div class="sub1-box-chart">
                <div class="sub1-proportion">
                  <p><i class="fa fa-sliders" aria-hidden="true"></i></p>
                  <p>累计占比</p>
                  <p v-text="powProportion">23%</p>
                </div>
                <chart :options="chart5" :theme="chartTheme"> </chart>
            </div>
          </div>
        </div>
        <div class="sub-box3">
          <div class="sub1-chart">
            <p class="chart-title"><span>特殊用电</span></p>
            <div class="sub1-box-chart">
                <div class="sub1-proportion">
                  <p><i class="fa fa-tasks" aria-hidden="true"></i></p>
                  <p>累计占比</p>
                  <p v-text="specialProportion">23%</p>
                </div>
                <chart :options="chart6" :theme="chartTheme"> </chart>
            </div>
          </div>
        </div>
      </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'hospitalA',
  data () {
    let chart3Color = new echarts.graphic.LinearGradient(0, 0, 0, 1,[
      {offset: 0, color: '#00e8cf'},
      {offset: 0.5, color: '#00e8cf'},
      {offset: 1, color: 'rgba(0, 232, 207, .1)'}
    ])
    let chart4Color = new echarts.graphic.LinearGradient(0, 0, 0, 1,[
      {offset: 0, color: '#00cdeb'},
      {offset: 0.5, color: '#00cdeb'},
      {offset: 1, color: 'rgba(0, 206, 203, .1)'}
    ])
    let chart5Color = new echarts.graphic.LinearGradient(0, 0, 0, 1,[
      {offset: 0, color: '#903bff'},
      {offset: 0.5, color: '#903bff'},
      {offset: 1, color: 'rgba(144, 59, 255, .1)'}
    ])
    let chart6Color = new echarts.graphic.LinearGradient(0, 0, 0, 1,[
      {offset: 0, color: '#d900c6'},
      {offset: 0.5, color: '#d900c6'},
      {offset: 1, color: 'rgba(217, 0, 198, .1)'}
    ])
    return {
      chartTheme: {},
      chartData: {},
      lightProportion: '',
      acProportion: '',
      powProportion: '',
      specialProportion: '',
      chart1: {
        color: ['#048eff','#00e7d0','#3f38ff','#8e3fff','#dd00c5'],
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}kW ({d}%)"
        },
        legend: {
          data: ['照明用电','空调用电','动力用电','特殊用电','综合用电'],
          orient: 'vertical',
          left: 40,
          top: 'center'
        },
        series : [
          {
            name:'电耗分项负荷',
            type:'pie',
            radius : '60%',
            center: ['50%', '50%'],
            data:[
              {value:435, name:'照明用电'},
              {value:310, name:'空调用电'},
              {value:274, name:'动力用电'},
              {value:235, name:'特殊用电'},
              {value:200, name:'综合用电'}
            ],
            roseType: 'radius',
            label: {
              normal: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: '#414474'
                },
                length: 10,
                length2: 20
              }
            }
          }
        ]
      },
      chart2: {
        color: ['#00e8cf','#3dbeff','#903bff','#d900c6'],
        tooltip : {
          trigger: 'axis',
          axisPointer: {
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['照明用电','空调用电','动力用电','特殊用电'],
          top: 10,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            boundaryGap : false,
            data : ['1:00','1:05','1:10','1:15','1:20','1:25','1:30','1:35','1:40','1:45','1:50','1:55','2:00','2:05'],
          }
        ],
        yAxis : [
          {
            type : 'value',
          }
        ],
        series : [
          {
            name:'照明用电',
            type:'line',
            stack: '总量',
            smooth: true,
            areaStyle: {normal: {}},
            data:[120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210]
          },
          {
            name:'空调用电',
            type:'line',
            stack: '总量',
            smooth: true,
            areaStyle: {normal: {}},
            data:[220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310]
          },
          {
            name:'动力用电',
            type:'line',
            stack: '总量',
            smooth: true,
            areaStyle: {normal: {}},
            data:[150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410]
          },
          {
            name:'特殊用电',
            type:'line',
            stack: '总量',
            smooth: true,
            areaStyle: {normal: {}},
            data:[320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320]
          },
          {
            name:'其他用电',
            type:'line',
            stack: '总量',
            smooth: true,
            areaStyle: {normal: {}},
            data:[320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320]
          } 
        ]
      },
      chart3: {
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis : [
          {
            type : 'value',
            min: function(value) {
              return value.min - 50;
            }
          }
        ],
        series : [
          {
            name:'直接访问',
            type:'bar',
            barWidth: '20%',
            data:[10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
              normal: {
                color: chart3Color,
                barBorderRadius: [20,20,0,0],
              }
            }
          }
        ]
      },
      chart4: {
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis : [
          {
            type : 'value',
            min: function(value) {
              return value.min - 50;
            }
          }
        ],
        series : [
          {
            name:'直接访问',
            type:'bar',
            barWidth: '20%',
            data:[10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
              normal: {
                color: chart4Color,
                barBorderRadius: [20,20,0,0],
              }
            }
          }
        ]
      },
      chart5: {
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis : [
          {
            type : 'value',
            min: function(value) {
                return value.min - 50;
              }
          }
        ],
        series : [
          {
            name:'直接访问',
            type:'bar',
            barWidth: '20%',
            data:[10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
              normal: {
                color: chart5Color,
                barBorderRadius: [20,20,0,0],
              }
            }
          }
        ]
      },
      chart6: {
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis : [
          {
            type : 'value',
            min: function(value) {
              return value.min - 50;
            }
          }
        ],
        series : [
          {
            name:'直接访问',
            type:'bar',
            barWidth: '20%',
            data:[10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
              normal: {
                color: chart6Color,
                barBorderRadius: [20,20,0,0],
              }
            }
          }
        ]
      }
    }
  },
  mounted: function () {
    this.$http('/vqdisplay/static/HospitalChartTheme.json')
    .then( (response) => {
      this.chartTheme = response.data
    })

    this.getData()

     
  },
  methods: {
    getData: function () {
      this.$http('/vqdisplay/elecitem/data')
      .then( (response) => {
        if (response.status===200) {
          console.log( response.data.body)
          let _data = response.data.body
          this.chart1.legend.data = _data.pie.legend
          this.chart1.series[0].data = _data.pie.series.sort(function (a, b) { return a.value - b.value; })

          
          if (_data.line.series.length !== 0) {
            this.chart2.legend.data = _data.line.legend
            this.chart2.xAxis[0].data = _data.line.xAxis
            for (let i in _data.line.legend) {
              let key = _data.line.legend[i]
              this.chart2.series[i].name = _data.line.legend[i]
              this.chart2.series[i].data = _data.line.series[i][key]
            }
          }
          

          this.chart3.series[0].data = _data.light.series[0]['照明']
          this.chart3.xAxis[0].data = _data.light.xAxis

          this.chart4.series[0].data = _data.ac.series[0]['空调']
          this.chart4.xAxis[0].data = _data.ac.xAxis

          this.chart5.series[0].data = _data.pow.series[0]['动力']
          this.chart5.xAxis[0].data = _data.pow.xAxis

          this.lightProportion = (_data.light_r*100).toFixed(2) + '%'
          this.acProportion = (_data.ac_r*100).toFixed(2) + '%'
          this.powProportion = (_data.p_r*100).toFixed(2) + '%'
          this.specialProportion = (_data.m_r*100).toFixed(2) + '%'
        }
      })
    }
  }
}
</script>

<style scoped>
  @import '../../../style/hospital.css';
  .echarts {
    height: 250px;
    width: 100%;
  }
</style>